<template>
  <router-view v-if="isRouterAlive"></router-view>
  <el-dialog
    v-model="isShowDialog"
    title="温馨提示"
    width="500"
    :before-close="handleDialogClose"
    :close-on-click-modal="false"
  >
    <div>
      <el-input v-model="EvenUrl" placeholder="请输入环境" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isShowDialog = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, nextTick, provide } from "vue";
import { useStore } from "vuex";

// 局部组件刷新
const isRouterAlive = ref(true);
const globalStore = useStore();
const reload = () => {
  isRouterAlive.value = false;
  nextTick(() => {
    isRouterAlive.value = true;
  });
};

provide("reload", reload); //

onMounted(() => {
  // 主题配色
  globalStore.dispatch("user/changeThem", "#4060c7"); //#4060c7 //#3c4772
  // 没登录就不用管
  if (globalStore.getters.token) {
    //重新拿左侧菜单数据
    globalStore.dispatch("user/getMenuList");
    // 查一下当前有没有在同步
    globalStore.dispatch("tool/startSyncCheck");
  }
});
// -------------------------------------
// 连续点击相关变量
const clickCount = ref(0); // 点击次数计数器
const lastClickTime = ref(0); // 上次点击时间戳
const requiredClicks = 20; // 触发事件需要的连续点击次数（可自定义，比如5次）
const maxInterval = 500; // 连续点击的最大时间间隔（毫秒，可自定义，比如500ms内连续点击）
const isShowDialog = ref(false);
const EvenUrl = ref("");
// 连续点击触发的事件（示例：打印日志+刷新页面）
const handleContinuousClick = () => {
  console.log(`已连续点击${requiredClicks}次，触发事件！`);
  // 这里可以写需要执行的操作，比如刷新、打开调试面板等
  EvenUrl.value = "";
  isShowDialog.value = true;
};

// 监听全局点击事件
const handleGlobalClick = () => {
  const now = Date.now(); // 当前时间戳
  // 判断是否在有效时间间隔内点击
  if (now - lastClickTime.value <= maxInterval) {
    clickCount.value++; // 间隔内点击，次数+1
  } else {
    clickCount.value = 1; // 超过间隔，重置为1次（当前点击）
  }
  lastClickTime.value = now; // 更新上次点击时间

  // 达到指定次数，触发事件
  if (clickCount.value >= requiredClicks) {
    handleContinuousClick();
    clickCount.value = 0; // 触发后重置计数器
  }
};
const handleDialogClose = () => {
  isShowDialog.value = false;
};
const handleConfirm = () => {
  if (!EvenUrl.value) return ElMessage.error("请选择要修改的环境地址");
  sessionStorage.setItem("url", EvenUrl.value);
  console.log(sessionStorage.getItem("url"));
  ElMessage.success("修改成功");
  isShowDialog.value = false;
  location.reload();
};
// 组件卸载时移除事件监听，避免内存泄漏
onUnmounted(() => {
  document.removeEventListener("click", handleGlobalClick);
});
document.addEventListener("click", handleGlobalClick);
</script>

<style lang="scss">
.el-button:active {
  background-color: var(--el-color-primary-light-2) !important;
  border: 1px solid var(--el-color-primary-light-2) !important;
}
</style>
